<!DOCTYPE html>
<html lang="en">
<link>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Batch_Send管理</title>
    <meta name="description" content="Batch_Send管理">
    <meta name="keywords" content="Batch_Send管理">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

    <!-- 引入样式/组件 -->
    <link rel="icon" href="../img/favicon.ico">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/elementui.css"/>
    <script src="../js/vue.js"></script>
    <script src="../js/elementui.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/util.js"></script>

<body class="hold-transition">

<div id="app">

    <div class="content-header">
        <h1>Batch_Send管理<small>Batch_Send管理</small></h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>Batch_Send管理</el-breadcrumb-item>
            <el-breadcrumb-item>Batch_Send管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    <div class="app-container">
        <div class="box">

            <el-button type="primary" @click="sendMore()">批量发货</el-button>
            <el-button type="primary" onclick="location.href='order_orderItem_list.html'">返回订单列表</el-button>

            <el-table :data="tableData"
                      style="width:100%"
                      @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                                        prop="id"
                                        label="ID/订单号"
                                        width="180">
                </el-table-column>
                <el-table-column
                                        prop="username"
                                        label="用户名"
                                        width="180">
                </el-table-column>
                <el-table-column

                                        label="物流名称"
                                        width="180">

                    <template slot-scope="scope">
                        <el-select v-model="formData.shippingName" filterable placeholder="请选择">
                            <el-option label="顺丰" value="顺丰"></el-option>
                            <el-option label="申通" value="申通"></el-option>
                        </el-select>
                    </template>

                </el-table-column>
                <el-table-column

                                        label="物流单号"
                                        width="180">

                    <template slot-scope="scope">
                        <el-input v-model="formData.shippingCode" placeholder="物流单号">
                        </el-input>
                    </template>

                </el-table-column>
                <el-table-column

                                        label="操作"
                                        width="180">

                    <template slot-scope="scope">
                        <el-button @click="send(scope.row.id)" type="primary" size="small">发货</el-button>
                    </template>

                </el-table-column>
            </el-table>

            <div class="pagination-container">
                <el-pagination @size-change="findPage"
                               @current-change="findPage"
                               :current-page.sync="currentPage"
                               :page-sizes="[10,30,50,100]"
                               :page-size="size"
                               layout="total,sizes,prev,pager,next,jumper"
                               :total="total">
                 </el-pagination>
            </div>

        </div>
    </div>
</div>

<script>
    new Vue({
        el: "#app",
        data:{
            tableData:[],
            currentPage:1,
            size:10,
            total:10,
            searchMap:{},
            formVisible:false,
            formData:{},
            orders:[],
            ids:[]
        },
        created(){
            this.findPage();
        },
        methods:{
            findPage(){
                axios.get(`/order/findPage.do?page=${this.currentPage}&&size=${this.size}`).then( res=>{
                        this.tableData = res.data.rows;
                        this.total = res.data.total;
                })
            },
            sendMore(){
                // 方法二(批量发货):
                // axios.post(`/order/batchSendMore.do`,this.ids).then( res =>{
                // 方法一(批量发货):
                axios.post(`/order/batchSendMore.do`,this.orders).then( res =>{
                        alert("成功");
                        this.findPage();
                })
            },
            handleSelectionChange(val){
                // 方法二(批量发货): 数组
                // var id = [];
                // for(var i=0;i<val.length;i++){
                //     id.push(val[i].id);
                // }
                // this.ids = id;
                // 方法一(批量发货): 集合和Map
                this.orders = val;
                console.log(this.orders);
            },
            // 方法一(发货)/方法三(发货【只能发货,不能改变字段】): 带@RequestBody
            send(id){
                this.formData.id = id;
                axios.post(`/order/batchSend.do`,this.formData).then(
                    res => {
                        alert("成功");
                        this.findPage();
                    }
                )
            }
            // 方法二(发货【只能发货,不能改变字段】): 不带@RequestBody
            // send(id){
            //     axios.get(`/order/batchSend.do?id=${id}`).then(
            //         res => {
            //             alert("成功");
            //             this.findPage();
            //         }
            //     )
            // }
        }
    })
</script>

</body>
</html>